<!--suppress JSUnresolvedVariable -->
<template>
  <div id="temp-app-container" class="temp-app-container">
    <div class="temp-list-container">
      <div class="handle-container">
        <el-button size="mini" class="handle-item" type="primary" icon="el-icon-back" @click="handleBack">返回</el-button>
        <el-button size="mini" class="handle-item" type="primary" icon="el-icon-plus" @click="handleCreate">创建
        </el-button>
      </div>
      <el-menu
        default-active="1"
        class="temp-menu-list"
        active-text-color="#d2deef"
        @select="handleChooseInstance"
      >
        <el-menu-item index="0">
          <div class="temp-menu-item-thumbnails" />
          <p class="temp-menu-item-title">新建可视化</p>
        </el-menu-item>
        <el-menu-item
          v-for="instance in list"
          :key="instance.instanceId"
          :index="String(instance.InstanceId)"
        >
          <div class="temp-menu-item-thumbnails">
            <img :src="instance.InstanceViewImg" alt="">
          </div>
          <p class="temp-menu-item-w-h">{{ instance.InstanceHeight }} * {{ instance.InstanceWidth }}</p>
          <p class="temp-menu-item-title">{{ instance.InstanceTitle }}</p>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="temp-view-container">
      <div class="temp-view-big-img">
        <img id="choose-instance-view" :src="chooseInstanceViewImg" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import { getInstancePage } from '../../../api/instance'
// noinspection JSUnusedGlobalSymbols
export default {
  data() {
    return {
      total: null,
      list: null,
      listQuery: {
        page: 1,
        size: 10,
        search: {}
      },
      chooseInstanceId: null,
      chooseInstanceViewImg: null
    }
  },
  created() {
    // 不用关闭左侧菜单也可以显示的非常好
    // 关闭左侧菜单栏，比较好显示
    // const _isOpened = this.$store.state.app.sidebar.opened
    // if (_isOpened) {
    //   // noinspection JSIgnoredPromiseFromCall
    //   this.$store.dispatch('app/toggleSideBar')
    // }
    this.getScreenInstanceList()
  },
  methods: {
    getScreenInstanceList() {
      getInstancePage(this.listQuery).then(response => {
        this.list = response.data.list
      })
    },
    handleBack() {
      this.$router.push({ name: 'DataViewInstanceList' })
    },
    handleCreate() {
      if (this.chooseInstanceId === null) {
        window.open('#/screen/create')
      } else {
        // 复制该模板，创建新的实例
        window.open('#/screen/edit/' + this.chooseInstanceId + '/1')
      }
    },
    handleChooseInstance(key, keyPath) {
      if (key === '0') {
        this.chooseInstanceId = null
        this.chooseInstanceViewImg = ''
      }
      for (let i = 0; i < this.list.length; i++) {
        const screenInstance = this.list[i]
        if (String(screenInstance.InstanceId) === key) {
          this.chooseInstanceId = screenInstance.InstanceId
          this.calcImageSize(screenInstance.InstanceWidth, screenInstance.InstanceHeight)
          this.chooseInstanceViewImg = screenInstance.InstanceViewImg
        }
      }
    },
    calcImageSize(width, height) {
      // 获取元素大小
      const showViewImage = document.getElementById('choose-instance-view')
      const realWidth = showViewImage.offsetWidth
      const realHeight = showViewImage.offsetHeight
      // 计算比率大小
      if ((width / height) >= (realWidth / realHeight)) {
        // 宽度有富余，应该按照宽度标准计算
        showViewImage.style.width = realWidth + 'px'
        const newHeight = realWidth / (width / height)
        showViewImage.style.height = newHeight + 'px'
        showViewImage.style.marginTop = ((realHeight - newHeight) / 2) + 'px'
      } else {
        // 高度有富余，应该按照高度为标准计算
        const newWidth = realHeight * (width / height)
        showViewImage.style.width = newWidth + 'px'
        showViewImage.style.marginLeft = ((realWidth - newWidth) / 2) + 'px'
        showViewImage.style.height = realHeight + 'px'
      }
    }
  }
}
</script>
